﻿<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <title>居住证办理点查询</title>

    <link href="/szgawx/static/plugins/css/mobiscroll.core-2.5.2-min.css" rel="stylesheet" type="text/css"/>

    <link href="/szgawx/static/plugins/css/mobiscroll.android-ics-2.5.2-min.css" rel="stylesheet" type="text/css"/>

    <link type="text/css" href="/szgawx/static/plugins/css/common.css" rel="stylesheet"/>

    <style type="text/css">

body {
    font-size: 62.5%;
    font-family: "微软雅黑", serif;
    margin: 0 auto; 
}

        .main {

        font-size: 1.6em;

        margin: 8px;

        }

        .main .form {

        height: 50px;

        line-height: 50px;

        border: 1px solid #dddddd;

        width: 100%;

        border-top: 0;

        }

        .main .boder-top {

        border-top: 1px solid #dddddd

        }

        .border_top_radius {

        border-top-left-radius: 3px;

        border-top-right-radius: 3px;

        }

        .border_bottom_radius {

        border-bottom-left-radius: 3px;

        border-bottom-right-radius: 3px;

        }

        .main .form .label {

        height: 50px;

        line-height: 50px;

        color: #157dfb;

        text-indent: 0.8em;

        float: left;

        width: 80px;

        }

        .main .form .element {

        height: 50px;

        line-height: 50px;

        margin-left: 85px;

        display: block;

        }

        .main .form .element input {

        color: #666;

        font-family: "微软雅黑", serif;

        text-indent: 0.3em;

        border: 0;

        width: 98%;

        font-size: 1.0em;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

        }



        .main .btn:active {

        background-color: #3300ff;

        cursor: hand;

        }

        #result {

        min-height: 6em;

        margin: 10px 10px;

        line-height: 2;

        height: 2em;

        color: #837D7D;

        }

        .main .uptop {

        margin-top: -1.6em;

        }

        .main .form input {

        border: none;

        font-size: 1.1em;

        color: #a28d8d;
        
        margin-left:-5px;

        }



        .main .searchbom {

        border: 1px solid rgb(182, 176, 176);

        border-bottom: none;

        border-bottom-left-radius: 0;

        border-bottom-right-radius: 0;

        margin-bottom: 0;

        }

        .main .other {

        border-radius: 0;

        margin-top: 0;

        margin-bottom: 0;



        }

        .main .searchtop {

        border-top-right-radius: 0;

        border-top-left-radius: 0;

        margin-top: 0;

        border-top: none;

        }

        #pol_station, #pol_office {

        display: none;

        }

		.tab_title {

        height: 33px;

        border: 1px solid #157dfb;

        border-radius: 6px;

        background-color: #157dfb;

    }



    .tab_title .tab_item {

        width: 50%;

        display: inline-block;

        float: left;

        text-align: center;

        height: 33px;

        line-height: 33px;

        color: #706C6C;

        font-size: 1.6em;

        cursor: hand;

        background-color: #fff;

    }



    .tab_title .checked {

        background-color: transparent;

        color: #fff;

    }



    .tab_title .tab_left {

        border-top-left-radius: 5px;

        border-bottom-left-radius: 5px;

    }



    .tab_title .tab_right {

        border-top-right-radius: 5px;

        border-bottom-right-radius: 5px;

    }

	.title-bar {

        border: none;

		top: 0;

		height: 2.6em;

		line-height: 2.6em;

		text-indent: 0.4em;

		width: 100%;

		font-size: 1.8em;

		font-weight: 500;

		color: #eaeaea;

		background-color: #000000;

		display: -webkit-box;

		z-index: 999;

    }



    .title-bar .title {

        background-color: #17b4eb;

        -webkit-box-flex: 1;

        text-align: center;

        display: block;

    }



    .title-bar .btn-back {

        background-color: #17b4eb;

        border-top-left-radius: 0.7em;

        display: block;

        width: 3.0em;

        border-right: 1px solid rgba(197, 238, 220, 0.67);

    }



    .title-bar .btn-oper {

        border-top-right-radius: 0.7em;

        background-color: #17b4eb;

        display: block;

        width: 3.0em;

        text-align: center;

        width: -webkit-fit-content;

        min-width: 3.0em;

    }
    
     a {
 	 	text-decoration: none;
	  }

    </style>

</head>

<body>

<div class="main">

    <div class="form  boder-top border_top_radius">

        <label class="label" for="pol_area">区属</label>

        <select class="element" id="pol_area">

        </select>

    </div>

    <div class="form other">

        <label class="label" for="pol_station">派出所</label>

        <select class="element" id="pol_station"></select>

    </div>

    <div class="form searchtop border_bottom_radius">

        <label class="label" for="pol_office">警务室</label>

        <select class="element" id="pol_office"></select>

    </div>

    <div><a id="btn_query" class="btn simple no-border">查 询</a></div>

    <div id="result" style="display: none;">

        <!-- <div>

             <span>分局电话：</span>

             <span id="fjdh"></span>

         </div>

         <div>

             <span>派出所电话：</span>

             <span id="pcsdh"></span>

         </div>-->

        <div>

            <span>警务室地址：</span>

            <span id="bgsdz"></span>

        </div>

        <div>

            <span>警务民警：</span>

            <span id="jwmj"></span>

        </div>

        <div>

            <span>警号：</span>

            <span id="jh"></span>

        </div>

        <div>

            <span>联系电话：</span>

            <span id="lxdh"></span>

        </div>

    </div>

</div>

<script src="/szgawx/static/plugins/js/jquery-2.1.1.min.js" type="text/javascript"></script>

<script src="/szgawx/static/plugins/js/common.js" type="text/javascript"></script>

<script src="/szgawx/static/plugins/js/mobiscroll.core-2.5.2-min.js" type="text/javascript"></script>

<script src="/szgawx/static/plugins/js/mobiscroll.datetime-2.5.1-min.js" type="text/javascript"></script>

<script src="/szgawx/static/plugins/js/mobiscroll.select-2.5.1-min.js" type="text/javascript"></script>

<script type="text/javascript">

	var _preFix = getServerPreFix();
	
	var theRequest = GetRequest();

    var currPoliceOffice;//当前选中警务室

    var currPoliceOfficeList;//当前警务室集合

    var currStation;//当前选中派出所

    var currStationList;//当前派出所集合

    $(function () {

	    //级联初始化

        //区属

        $.ajax({

            url: _preFix+"/szgawx/api/query/police-bureaus?source="+theRequest['source']+"&openId="+theRequest['openId'],

            type: "get",
            
            dataType:"json",

            timeout: 6000,

            success: function (resp) {

                var htmlArr = "";

                var resultData = resp.data;

                 var resultCopy;

                if (resultData) {

                    var _len = resultData.length;

                    resultCopy=new Array(_len+1);

                    for(var i=0;i < _len;i++){

	                   if (i == 0) {

							 var sss={Name:"请选择",Id:"000"};

							resultCopy[0] = sss;

						} else {

							resultCopy[i] = resultData[i - 1];

							}

						}

                    resultCopy[_len] = resultData[_len-1];

					}

					var len2 = resultCopy.length;

					for ( var i = 0; i < len2; i++) {

						htmlArr += '<option value="' + resultCopy[i].Id + '">'

								+ resultCopy[i].Name + '</option> ';

					}

                     

                $("#pol_area").empty().val("").append(htmlArr).scroller('destroy').scroller({

                    preset: "select",

                    theme: "android-ics light",

                    mode: "scroller",

                    display: "modal",

                    group: true,

                    width: 180,

                    rows: 5,

                    cancelText: '取消',
                    
                    setText: '确定'
                   // "btnClass" : 'sqh_color_56 font_16 sqh_line_height_15 margin_10 sqh_font_type',  
                   /// "onShow":showDialog  

                }).change(function () {

                    currPoliceOffice=null;//清空当前选中数据

                    currPoliceOfficeList=null;

                    currStation=null;

                    currStationList=null;

                    loadPoliceStation($(this).scroller("getValue"));

                });

                loadPoliceStation(resultData[0].Id);

            },

            error: function (resp) {
                toast(resp, 2000);
                window.location.href = _preFix + "/szgawx/oauth/oauth?state="+_preFix+"/szgawx/api/query/6";
            }

        });

        $("#btn_query").click(function () {

        	if($("#pol_area").val()=="000"&$("#pol_station").val()=="000"&$("#pol_office").val()=="000"){

        		toast("请选择区属,派出所,警务室");

        		return;

        	}else if($("#pol_station").val()=="000"&$("#pol_office").val()=="000"){

        		toast("请选择派出所,警务室");

        		return;

        	}

        	

        		else if($("#pol_area").val()=="000"){

            		toast("请选择区属");

            		return;

        		}

        		else if($("#pol_station").val()=="000"){

            		toast("请选择派出所");

            		return;

        		}

        		else if($("#pol_office").val()=="000"&$("#pol_station").val()=="000"){

            		toast("请选择派出所,警务室");

            		return;

            	}

        		else if($("#pol_area").val()=="000"&$("#pol_station").val()=="000"){

            		toast("请选择区属,派出所");

            		return;

            	}

				else if($("#pol_office").val()=="000"){

        		toast("请选择警务室");

        		return;

        	}else

        		

            if (currPoliceOffice) {
                document.getElementById("bgsdz").innerText = currPoliceOffice.StreetAdd;

                document.getElementById("jwmj").innerText = currPoliceOffice.PoliceMan;

                var _jh = currPoliceOffice.PoliceNum;

                document.getElementById("jh").innerText = _jh ? _jh : "";

                document.getElementById("lxdh").innerText = currPoliceOffice.Phone;

                $("#result").show();

            } else {

                toast("暂无数据");

            }

        });

		

        /**

         * 根据区域加载派出所

         * @constructor

         */

        function loadPoliceStation(regionId) {
            var _key = "police-station:" + regionId;

            var _cache = getObj(_key);

            if (_cache) {

                initPoliceStation(_cache.data);

                currStationList = _cache.data;

                currStation = _cache.data[0];

            } else {

                $.ajax({

                    url: _preFix+"/szgawx/api/query/police-stations/" + regionId+"?source="+theRequest['source']+"&openId="+theRequest['openId'],

                    type: "get",
                    
                    dataType:"json",

                    timeout: 6000,

                    success: function (resp) {

                        var resultData = resp.data;

                        initPoliceStation(resultData);

                        currStationList = resultData;

                        //将当前信息缓存至本地

                        putObj(_key, resultData, 30 * 24 * 3600);

                    },

                    error: function (resp) {
                        toast(resp, 2000);

                    }

                });

            }

        }



        function initPoliceStation(stationList) {

            var htmlArr = "";

            var _len = stationList.length;

            var resultCopy;

            if (stationList) {

                var _len = stationList.length;

                resultCopy=new Array(_len+1);

                for(var i=0;i < _len;i++){

                   if (i == 0) {

					 var sss={Name:"请选择",Id:"000"};

						resultCopy[0] = sss;

					} else {

						resultCopy[i] = stationList[i - 1];

						}



					}

                resultCopy[_len] = stationList[_len-1];

				}

				var len2 = resultCopy.length;

				for ( var i = 0; i < len2; i++) {

					htmlArr += '<option value="' + resultCopy[i].Id + '">'

							+ resultCopy[i].Name + '</option> ';

				}

            $("#pol_station").empty().val("").append(htmlArr).show().scroller('destroy').scroller({

                preset: "select",

                theme: "android-ics light",

                mode: "scroller",

                display: "modal",

                width: 180,

                rows: 5,

                cancelText: '取消',
                
                setText: '确定'

            }).change(function () {

                currPoliceOffice=null;//清空当前选中数据

                currPoliceOfficeList=null;

                var sel_item_val = $(this).scroller('getValue');

                var _len = currStationList.length;

                for (var i = 0; i < _len; i++) {

				

                    if (currStationList[i] && currStationList[i].Id == sel_item_val) {

                        currStation = currStationList[i];

                        break;

                    }

                }

                loadPoliceOffice(sel_item_val);

            });

            currStation = stationList[0];

            loadPoliceOffice(stationList[0].Id);

        }



        /**

         * 初化警务室信息

         * @param policeOfficeId 警务室ID

         */

        function loadPoliceOffice(policeOfficeId) {

            var _key = "police-office:" + policeOfficeId;

            var _cache = getObj(_key);

            if (_cache) {

                initPoliceOffice(_cache.data);

                currPoliceOfficeList = _cache.data;

            } else {

                $.ajax({

                    url: _preFix+"/szgawx/api/query/police-offices/" + policeOfficeId+"?source="+theRequest['source']+"&openId="+theRequest['openId'],

                    type: "get",
                    
                    dataType:"json",

                    timeout: 6000,

                    success: function (resp) {

                        var resultData = resp.data;

                        if (resultData) {

                            initPoliceOffice(resultData);

                            currPoliceOfficeList = resultData;

                            //将当前信息缓存至本地

                            putObj(_key, resultData, 30 * 24 * 3600);

                        } else {

                            $("#pol_office,#pol_office_dummy").empty().val("");

                            $("#result").hide();

                            toast("暂无警务室数据")

                        }

                    },

                    error: function (resp) {

                        toast(resp, 2000);

                    }

                });

            }

        }



        function initPoliceOffice(dataList) {

            var htmlArr = "";

            var _len = dataList.length;

            var resultCopy;

            if (dataList) {

                var _len = dataList.length;

                resultCopy=new Array(_len+1);

                for(var i=0;i < _len;i++){

                   if (i == 0) {

							   var sss={JWSName:"请选择",guid:"000"};

						resultCopy[0] = sss;

					} else {

						resultCopy[i] = dataList[i - 1];

						}



					}

                resultCopy[_len] = dataList[_len-1];

				}

				var len2 = resultCopy.length;

				for ( var i = 0; i < len2; i++) {

					htmlArr += '<option value="' + resultCopy[i].guid + '">'

							+ resultCopy[i].JWSName + '</option> ';

				}

            $("#pol_office").empty().val("").append(htmlArr).show().scroller('destroy').scroller({

                preset: "select",

                theme: "android-ics light",

                mode: "scroller",

                display: "modal",

                width: 180,

                rows: 5,

                setText: '确定',

                cancelText: '取消'

            }).change(function () {

                var sel_item = $(this).scroller('getValue');

                var _len = currPoliceOfficeList.length;

                for (var i = 0; i < _len; i++) {

                    if (currPoliceOfficeList[i] && currPoliceOfficeList[i].guid == sel_item) {

                        currPoliceOffice = currPoliceOfficeList[i];

                        break;

                    }

                }

            });

            currPoliceOffice = dataList[0];

        }



        function putObj(key, data, expireSeconds) {

            var obj = {"key": key, "data": data, "expire": (new Date().getTime() + expireSeconds * 1000)};

            sessionStorage.setItem(key, JSON.stringify(obj));

        }



        function getObj(key) {

            var _item = sessionStorage.getItem(key);

            if (_item) {

                var obj = JSON.parse(_item);

                //判断是否过期，如果过期则返回null

                var _now = new Date().getTime();

                if (_now <= obj.expire) {

                    return obj;

                }

                return null;

            }

            return null;

        }

    });



	

	

</script>

<div style="width:94%; float:left; margin-left:3%; line-height:28px; font-family:'微软雅黑'; font-size:14px; color:#ff0000; position:absolute; bottom:10px;">提示说明：您可以通过选择所在区属、派出所、警务室来查询居住证的办理地点。</div>

</body>

</html>

